/**
 * Created by Administrator on 2019/10/31.
 */
$(function () {
//    初始化fullpage组件
//    1. 设置每一个屏幕的背景颜色
//    2. 设置屏幕内容的对齐方式  默认是垂直居中的  改成顶部对齐
//    3. 设置导航 设置指示器 点容器
//    4. 监听进入某一屏的时候 回调

    $('.container').fullpage({
    //    配置参数
        sectionsColor:["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
        verticalCentered:false,
        navigation:true,
        afterLoad: function (link, index) {
        //  index 序号 1开始  当前屏的序号
        //     console.log(index);
            $('.section').eq(index-1).addClass('now');
        },
        //  离开某一个页面的时候触发
        onLeave:function (index,nextIndex,direction) {
           // console.log('ok');
            var currentSection = $('.section').eq(index-1);
            if (index == 2 && nextIndex == 3) {
            //    当前是从第二页到第三页
                currentSection.addClass('leaved');
            }else if (index == 3 && nextIndex == 4) {
                //    当前是从第三页到第四页
                currentSection.addClass('leaved');
            }else if (index == 5 && nextIndex == 6) {
                //    当前是从第五页到第六页
                // currentSection.removeClass('now').addClass('leaved');
                currentSection.addClass('leaved');
                $('.screen06 .box').addClass('show') 
            }else if (index == 6 && nextIndex == 7) {
                //    当前是从第六页到第七页
                $('.screen07 .star').addClass('show');  // 评价五角星的显示方法二
                $('.screen07 .text').addClass('show');
                $('.screen07 .star img').each(function (i,item) { // 评价五角星的显示方法一
                    // 方法一：img display:none  这样设置时，使用 jQuery 比较方便
                    // console.log(1)
                    // 补充说明：这里的 $(item) == $(this)
                    // console.log(i * 0.25 *1000)
                    $(this).delay(i * 0.5 *1000).fadeIn(); //这里是毫秒
                //    方法二: img opacity
                    $(this).css('transition-delay',i*0.5 + 's'); // 这里是秒  两种方法的单位不一样
                });
            }
        },
        //    前提：最好在插件初始完毕 或者 插件内容渲染完毕
        afterRender:function () {
            //思路一：查看this，到this里面找
            // console.log(this);
            // this 没有 api 方法

            //思路二：jQuery 插件初始的时候封装这个方法
            // 1。 回想jQuery插件的封装  $.fn.fullpage = function(){}
            // 2.  jquery本身没有的方法通过$.fn的方法追加方法  认为是插件方法
            // 3.  例如： $.fn.css = functiom(){ return this.attr('css') }  // this 你选择谁this（jQuery对象）就执行谁
            // $.fn.fullpage.moveSectionDown(); // $.fn是jQuery扩展插件的入口



            //    点击更多切换下一页
            $('.more').on('click',function () {
                $.fn.fullpage.moveSectionDown();
            });

        //    当第四屏的购物车动画结束之后执行收货地址的动画
            $('.screen04 .cart').on('transitionend',function () {
                // console.log('过渡结束了');
                /*  知识点4--jquery 扩展选择器
                :last       最后一个
                :first      第一个
                :visible    显示
                :hidden     隐藏
                :checked    CheckBox选中
                :selected   下拉框被选中
                 */
                $('.screen04 .address').show().find('img:last').fadeIn(1000);
                $('.screen04 .text').addClass('show')
            });

        //    第八屏功能
        //    1。 手要跟着鼠标移动
            $('.screen08').on('mousemove',function (e) {
                // console.log(e);
                // 鼠标的坐标定位给手
                $(this).find('.hand').css({
                    left:e.clientX - 200,
                    top:e.clientY -40
                });
            }).find('.again').on('click',function () {
                //    2.点击再来一次重置动画，并且跳回第一页
               //  动画是怎么进行的？
            //    2.1  加 now  类
            //    2.2. 加 leaved  类
            //    2.3  加 show  类
            //     $('.now,.leaved,.show').removeClass('now').removeClass('leaved').removeClass('show')
                $('.now').removeClass('now');
                $('.leaved').removeClass('leaved');
                $('.show').removeClass('show');
            //    2.4  加 css 属性  ==>  后果：加一个style属性
            //    2.5  用 jQuery 方法  show()  fadeIn()  ==>  后果： 加一个style属性
                $('.content [style]').removeAttr('style');

            //    跳回第一页
                $.fn.fullpage.moveTo(1);
            })

        },
        //  页面切换的时间  默认是700毫秒  为了第二屏的滚动而设置的
        scrollingSpeed:1000

    });
})
